<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field['options'].displayStyle"
  >
    <div class="scene-waiting-blue2-widget" :style="getStyle('area')">
      <div class="widget-inside-top">
        <div class="widget-inside-top-left">
          <div class="logo-wrapper">
            <img :src="logoUrl" v-if="logoUrl" alt="logo" class="logo-img" />
          </div>
        </div>
        <div class="widget-inside-top-right">
          <div class="right-text">
            <scrollX2>{{ optionsInfo.topTitle }}</scrollX2>
          </div>
        </div>
      </div>

      <div
        class="widget-inside"
        :class="{ 'header-hide': !optionsInfo['headShow'] }"
      >
        <div class="main-content">
          <div class="main-content-left">
            <!--列表头部-->
            <div
              class="list-head"
              :style="getStyle('head')"
              v-if="optionsInfo['headShow']"
            >
              <template v-for="item in optionsInfo['colOptions']">
                <div
                  class="label-item"
                  :class="getClassName(item.value)"
                  v-if="getColShow(item.value)"
                  :style="setFlex(item, 'header')"
                >
                  <div class="item-inside">
                    {{ item.label }}
                  </div>
                </div>
              </template>
            </div>
            <!--列表内容-->
            <div class="list-body" v-if="true">
              <template v-for="(item, index) in queueList">
                <div class="list-body-inside" :style="getStyle('listItem')">
                  <template v-for="items in optionsInfo['colOptions']">
                    <template v-if="getColShow(items.value)">
                      <div
                        class="label-item"
                        :class="getClassName(items.value)"
                        :style="setFlex(items, 'list')"
                      >
                        <template
                          v-if="
                            items.value !== 'treatingPatient' &&
                            items.value !== 'waitPatientList'
                          "
                        >
                          <template v-if="items.value === 'waitPatientCount'">
                            <div class="item-inside">
                              {{ item[items.value] || "\u00a0" }}
                            </div>
                          </template>
                          <!--除了人数-->
                          <template v-else>
                            <div class="item-inside">
                              <ScrollX
                                :key="`${item[items.value]}-${index}`"
                                :speed="optionsInfo['listSpeed'] || 10"
                              >
                                {{ getColContent(item, items.value) }}
                              </ScrollX>
                            </div>
                          </template>
                        </template>
                        <!--就诊患者-->
                        <template v-if="items.value === 'treatingPatient'">
                          <div class="item-inside">
                            <ScrollEditX
                              :content="getCurrentPatient(item) || ''"
                              :key="`${item[items.value]}`"
                            />
                          </div>
                        </template>
                        <!--候诊患者-->
                        <template v-if="items.value === 'waitPatientList'">
                          <div class="item-inside col-wait-inside">
                            <div
                              v-for="(item, index) in getWaitPatient(
                                item.waitPatientList
                              )"
                              :key="index"
                              class="wait-info"
                            >
                              {{ item.orderNo }}&nbsp;{{
                                item.patientName || "\u00a0"
                              }}
                            </div>
                          </div>
                        </template>
                      </div>
                    </template>
                  </template>
                </div>
              </template>
            </div>
          </div>
          <div class="main-content-right">
            <!--列表头部-->
            <div class="list-head" :style="getStyle('head')">
              <div class="label-item" :style="setFlex({ flex: 1 }, 'header')">
                <div class="item-inside">正在等候</div>
              </div>
            </div>
            <div class="right-list-body">
              <div class="right-list-body-inside">
                <div
                  class="right-item"
                  v-for="(item, index) in getDeptWaitPatient"
                  :key="index"
                >
                  <div class="dept-name">
                    <ScrollX>{{ item.deptName }}</ScrollX>
                  </div>
                  <vue-seamless-scroll
                    class="scroll"
                    :ref="`scroll-${index}`"
                    @ScrollEnd="(e) => handleScrollEnd(e, index)"
                    :class-option="optionScroll"
                    :data="item.waitPatientList"
                  >
                    <div class="list-wrp">
                      <div
                        class="list-item"
                        v-for="(ele, index) in item.waitPatientList"
                        :key="index"
                      >
                        <div class="list-item-name">
                          {{ ele.orderNo }}&nbsp;{{ ele.patientName }}
                        </div>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="widget-inside-bottom">
        <div class="widget-inside-bottom-left">
          <div class="time">
            <span>{{ timeInfo.time }}</span>
          </div>
        </div>
        <div class="widget-inside-bottom-right">
          <div class="text"><scrollX2 align="left">{{optionsInfo.tips}}</scrollX2></div>
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import { v4 as uuid } from "uuid";
import { pxToVw } from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import vueSeamlessScroll from "vue-seamless-scroll";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import scrollX2 from "@c/public/scroll/scrollX.vue";
import ScrollEditX from "@c/public/seamlessScroll/ScrollEditX.vue";
import { buildParentApi } from "@/utils/designer/util";
import ScrollEditY from "@c/public/seamlessScroll/ScrollEditY.vue";
import dayjs from "dayjs";
import * as types from "@c/public/form-designer/devType/datas-types";

let buildParent = buildParentApi();

export default {
  name: "scene-waiting-blue-nx-ultrasound-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  components: {
    ScrollEditY,
    ScrollX,
    scrollX2,
    ScrollEditX,
    CompOperate,
    vueSeamlessScroll,
  },

  data() {
    return {
      widgetKey: uuid(),
      optionsInfo: Object(),
      apiTimeInfo: null,
      deviceInfo: {
        deviceName:''
      },
      rowFieldsDict: [
        { key: "dept", field: "deptShowName" },
        { key: "room", field: "roomShowName" },
        { key: "number", field: "numberName" },
        { key: "doc", field: "docShowName" },
        { key: "curr", field: "currShowName" },
        { key: "wait", field: "waitShowName" },
        { key: "total", field: "total" },
      ],
      groupedQueueList: [],
      groupIdx: 0,
      lastPageTs: 0,
    };
  },

  computed: {
    timeInfo() {
      if (this.apiTimeInfo) {
        return this.apiTimeInfo;
      } else {
        let time = {
          date: dayjs().format("YYYY-MM-DD"),
          time: dayjs().format("HH:mm"),
          week: dayjs().format("dddd"),
          timestamp: (new Date().getTime() / 1000).toFixed(0),
        };
        return time;
      }
    },
    optionScroll() {
      let { openScroll, waitingPatientScrollNumber, waitingVisitStep } =
        this.optionsInfo;
      console.log(
        openScroll,
        waitingPatientScrollNumber,
        waitingVisitStep,
        "waitingVisitStep"
      );
      return {
        hoverStop: true,
        direction: 1,
        openTouch: false,
        step: [1, 1.5, 2, 2.5, 3][waitingVisitStep - 1], // 数值越大速度滚动越快
        limitMoveNum: openScroll ? waitingPatientScrollNumber + 1 : 999999, // 开始无缝滚动的数据量 this.dataList.length
      };
    },
    queueList() {
      const { showRowNums = 6 } = this.optionsInfo || {};
      const group = this.groupedQueueList[this.groupIdx] || [];

      /* 无数据：返回 showRowNums 个占位对象 */
      if (group.length === 0) {
        return Array.from({ length: showRowNums }, () => ({}));
      }

      /* 数据不足一页：补满 */
      if (group.length < showRowNums) {
        return group.concat(
          Array.from({ length: showRowNums - group.length }, () => ({}))
        );
      }

      return group;
    },
    logoUrl() {
      if (this.optionsInfo.logoUrl) {
        return this.optionsInfo.logoUrl?.val?.url;
      } else {
        return "";
      }
    },
    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid();
      };
    },

    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Object();
        let Obj = Object();
        switch (val) {
          case "area":
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            return Obj;
          case "head":
            Reflect.set(Obj, "color", info.headerFontColor);
            Reflect.set(Obj, "fontWeight", info.headFontWeight);
            return Obj;
          case "headItem":
            Reflect.set(Obj, "fontSize", pxToVw(info.headFontSize));
            Reflect.set(Obj, "backgroundColor", info.headerBackgroundColor);
            return Obj;
          case "list":
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            return Obj;
          case "listItem":
            Reflect.set(Obj, "fontSize", pxToVw(info.itemFontSize));
            Reflect.set(Obj, "fontWeight", info.itemFontWeight);

            return Obj;
        }
      };
    },

    // 设置列宽
    setFlex() {
      return function (item, val) {
        let Obj = Object();
        let info = this.optionsInfo || Object();
        switch (val) {
          case "header":
            Reflect.set(Obj, "flex", item.flex || 1);
            Reflect.set(Obj, "fontSize", pxToVw(info.headFontSize));
            Reflect.set(Obj, "backgroundColor", info.headerBackgroundColor);
            return Obj;
          case "list":
            Reflect.set(Obj, "flex", item.flex || 1);
            Reflect.set(Obj, "color", item.color || "#ffffff");
            return Obj;
        }
      };
    },

    // 栏目是否显示
    getColShow() {
      return function (val) {
        const self = this;
        let { defaultShowCol, mergeColInfo } = self.optionsInfo || Array();
        if (val === "registerObjNames") {
          if (
            !!mergeColInfo &&
            !!mergeColInfo[1] &&
            !!mergeColInfo[1].length &&
            mergeColInfo[1].length === 2
          ) {
            return false;
          } else {
            return defaultShowCol.includes(val);
          }
        } else {
          return defaultShowCol.includes(val);
        }
      };
    },

    // 患者的ClassName
    getClassName() {
      return function (val) {
        switch (val) {
          case "treatingPatient":
            return "current-patient";
          case "waitPatientList":
            return "wait-patient";
          case "waitPatientCount":
            return "patient-count";
          case "registerObjNames":
            return "register-name";
          case "deptName":
            return "deptName-name";
        }
      };
    },

    // 拼接显示具体内容
    getColContent() {
      return function (val, key) {
        const self = this;
        let { mergeColInfo, registerObjNameKey, roomNameKey, deptNameKey } =
          self.optionsInfo || Object();
        switch (key) {
          // 诊室&诊室简称
          case "treatmentRoomName":
            if (
              !!mergeColInfo &&
              !!mergeColInfo[1] &&
              !!mergeColInfo[1].length &&
              mergeColInfo[1].length === 2
            ) {
              let mergeInfo = `${val[roomNameKey] || val[key] || "\u00a0"} ${
                val[registerObjNameKey] || "\u00a0"
              }`;
              return self.$lodash.trim(mergeInfo);
            } else {
              return val[roomNameKey] || val[key] || "\u00a0";
            }
          case "registerObjNames":
            return val[registerObjNameKey] || val[key];
          case "deptName":
            return val[deptNameKey] || val[key];
          default:
            return val[key] || "\u00a0";
        }
      };
    },

    // 患者列表
    waitingPatientInfos() {
      let devType = this.devType;
      let { showRowNums = 5 } = this.optionsInfo;
      let WaitingPatientList = this.$store.getters["getWaitingPatientInfo"];
      if (devType) {
        if (WaitingPatientList.apiData.length > showRowNums) {
          return WaitingPatientList.apiData.slice(0, showRowNums);
        } else {
          let arr = new Array(
            showRowNums - WaitingPatientList.apiData.length
          ).fill({});
          return [...WaitingPatientList.apiData, ...arr];
        }
      } else {
        if (WaitingPatientList.mockData.length > showRowNums) {
          return WaitingPatientList.mockData.slice(0, showRowNums);
        } else {
          let arr = new Array(
            showRowNums - WaitingPatientList.mockData.length
          ).fill({});
          return [...WaitingPatientList.mockData, ...arr];
        }
      }
    },

    // 就诊的患者|| 医生暂停接诊
    getCurrentPatient() {
      return function (val) {
        /**
         * 在线状态 0在线 1暂停 2退出
         */
        let type = parseInt(val.onlineStatus);
        switch (type) {
          case 0:
          case 2:
            if (!!val.treatingPatient && !!val.treatingPatient.length) {
              let currentPatient = Array();
              val.treatingPatient.forEach((item) => {
                let temp = `<span class="patient-orderNo">${
                  item.orderNo || "\u00a0"
                }&nbsp;</span>${item.patientName || "\u00a0"}`;
                let temps = this.$lodash.trim(temp);
                currentPatient.push(temps);
              });
              let info = this.$lodash.join(currentPatient, " ");
              return this.$lodash.trim(info);
            } else {
              return "\u00a0";
            }
          case 1:
            return "暂停接诊";
        }
      };
    },
    getDeptWaitPatient() {
      let deptWaitPatient = this.$store.getters["getWaitingPatientInfo"];

      let allData = this.devType
        ? deptWaitPatient.apiData
        : deptWaitPatient.mockData;
      console.log(allData, "allData");

      if (!allData || !Array.isArray(allData)) {
        return [];
      }

      // 按deptName对waitPatientList进行整合
      const deptMap = new Map();

      allData.forEach((item) => {
        const deptName = item.deptName || "未知科室";
        const waitPatientList = item.waitPatientList || [];

        if (deptMap.has(deptName)) {
          // 如果科室已存在，合并waitPatientList
          const existingData = deptMap.get(deptName);
          existingData.waitPatientList = [
            ...existingData.waitPatientList,
            ...waitPatientList,
          ];
        } else {
          // 如果科室不存在，创建新的对象
          deptMap.set(deptName, {
            deptName: deptName,
            waitPatientList: [...waitPatientList],
          });
        }
      });

      // 转换为数组并返回，确保每个科室的waitPatientList至少6个
      const result = Array.from(deptMap.values()).map((dept) => {
        const waitPatientList = dept.waitPatientList || [];
        if (waitPatientList.length < 6) {
          // 如果不足6个，用空对象补足
          const fillCount = 6 - waitPatientList.length;
          const fillItems = Array(fillCount).fill({});
          return {
            ...dept,
            waitPatientList: [...waitPatientList, ...fillItems],
          };
        }
        return dept;
      });

      return result.length > 3
        ? result.slice(0, 3)
        : [...result, {}, {}, {}].slice(0, 3);
    },

    //候诊患者--此场景固定截取1名候诊患者
    getWaitPatient() {
      return function (row) {
        if (!!row && Array.isArray(row)) {
          let sliceInfo = row.slice(0, 1);
          if (sliceInfo.length === 1) {
            return sliceInfo;
          } else {
            let arr = new Array(1 - sliceInfo.length).fill({});
            return [...sliceInfo, ...arr];
          }
        } else {
          return new Array(1).fill({});
        }
      };
    },
  },

  mounted() {
    this.handleOnMounted();
    if (!this.devType) {
      let WaitingPatientList = this.$store.getters["getWaitingPatientInfo"];
      this.executeMethod("patientListInfo", WaitingPatientList.mockData);
    }

    // setInterval(() => {
    //   this.executeMethod("patientListInfo", WaitingPatientList.mockData);
    // }, 10000);
    // console.log(this.getDeptWaitPatient, "this.getDeptWaitPatient()");
  },

  methods: {
    // 等待候诊滚动结束
    handleScrollEnd(e, index) {
      const self = this;
      if (self.$refs[`scroll-${index}`]) {
        self.$nextTick(() => {
          self.$refs[`scroll-${index}`][0] &&
            self.$refs[`scroll-${index}`][0].reset();
        });
      }
    },

    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "setDate":
          this.apiTimeInfo = JSON.parse(data);
          break;
        case "sendDeviceInfo":
          console.log(data, "data");
          this.deviceInfo = data;
          break;
        case "patientListInfo":
          let patientList = this.$lodash.cloneDeep(data);
          const { showRowNums, switchTime = 5 } = this.optionsInfo;
          const interval = switchTime * 1000;

          /* ① 重算二维数组并补空位 */
          const newGrouped = this.$lodash(patientList || [])
            .chunk(showRowNums)
            .map((g) =>
              g.length < showRowNums
                ? g.concat(this.$lodash.fill(Array(showRowNums - g.length), {}))
                : g
            )
            .value();

          this.groupedQueueList = newGrouped; // 响应式赋值

          /* ② 按时间节流决定是否翻页 */
          const now = Date.now();
          const total = newGrouped.length || 1; // 组数

          /* ① 首次加载：只初始化时间戳，保证停留第一页 */
          if (this.lastPageTs === 0) {
            this.groupIdx = 0; // 明确锁定第一页
            this.lastPageTs = now; // 记录基准时间
          } else if (now - this.lastPageTs >= interval) {
            /* ② 以后每次由接口触发时，看间隔是否已到 */
            this.groupIdx = (this.groupIdx + 1) % total;
            this.lastPageTs = now; // 更新基准时间
          }

          /* ③ 若数据组数缩小，确保索引不越界 */
          if (this.groupIdx >= total) {
            this.groupIdx = 0;
          }
          console.log(" this.groupedQueueList", this.groupedQueueList);
          // buildParent.executeParentMethod('writeLog', JSON.stringify({sign: '模板-患者信息', key: key, data: data}));
          await this.$store.dispatch("setWaitingPatientInfo", patientList);
          break;
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = val.options.config;
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>

<style lang="scss" scoped>
.scene-waiting-blue2-widget {
  color: #333;
  align-self: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  // backdrop-filter: blur(4px);
  box-sizing: border-box;
  background: transparent;
  background-image: url("~@/components/assets/images/design/chaosheng-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  .widget-inside-top {
    display: flex;
    width: 100%;
    height: 150px;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    .logo-wrapper {
      display: flex;
      align-items: center;
      height: 150px;
      flex: 1;
      max-width: 690px;
      overflow: hidden;
      img {
        height: 100px;
        max-width: 100%;
        max-height: 100%;
      }
    }
    .right-text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 857px;
      flex-shrink: 0;
      height: 120px;
      background: #183c7a;
      border-radius: 20px;
      font-weight: 500;
      font-size: 90px;
      color: #ffffff;
      overflow: hidden;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }

  //不隐藏头部
  .widget-inside {
    width: 100%;
    height: 800px;
    overflow: hidden;
    padding: 20px 28px;
    box-sizing: border-box;

    .main-content {
      display: flex;
      height: 100%;
      border: 2px solid rgba(116, 163, 216, 0.6);
      overflow: hidden;
      .main-content-left {
        width: 714px;
        flex-shrink: 0;
        height: 100%;
        overflow: hidden;
      }
      .main-content-right {
        flex: 1;
        height: 100%;
        overflow: hidden;
        border-left: 2px solid rgba(116, 163, 216, 0.6);
        display: flex;
        flex-direction: column;
        .right-list-body {
          flex: 1;
          overflow: hidden;
          .right-list-body-inside {
            display: flex;
            height: 100%;
            .right-item {
              display: flex;
              flex-direction: column;
              flex: 1;
              flex-shrink: 0;
              height: 100%;
              overflow: hidden;
              border-right: 2px solid rgba(116, 163, 216, 0.6);
              &:last-of-type{
                border-right: none;
              }
              .dept-name {
                height: 91px;
                font-weight: 500;
                font-size: 52px;
                color: #ffff00;
                display: flex;
                align-items: center;
                justify-content: center;
                border-bottom: 2px solid rgba(116, 163, 216, 0.6);
              }
              .scroll {
                flex: 1;
                overflow: hidden;
              }
              .list-wrp {
                display: flex;
                flex-direction: column;
                flex: 1;
                .list-item {
                  height: 91px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-bottom: 2px solid rgba(116, 163, 216, 0.6);
                  
                }
                .list-item-name {
                  display: block;
                  height: 91px;
                  text-align: center;
                  line-height: 91px;
                  font-weight: 500;
                  font-size: 52px;
                  color: #94f7fc;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
    }
    .list-head,
    .list-body {
      width: 100%;
      background: transparent !important;
    }

    .list-head {
      display: flex;

      .label-item {
        display: flex;
        flex: 1;
        height: 118px;
        line-height: 118px;
        text-align: center;
        border-right: 2px solid rgba(116, 163, 216, 0.6);
        border-bottom: 2px solid rgba(116, 163, 216, 0.6);
        overflow: hidden;
        align-self: center;
        align-items: center;

        .item-inside {
          width: 100%;
          text-align: center;
          @include singleEllipsis(100%);
        }
      }

      .label-item:last-child {
        border-right: none;
      }
    }

    .list-body {
      display: flex;
      width: 100%;
      height: calc(100% - 110px);
      align-items: center;
      align-self: center;
      flex-direction: column;
      flex-grow: 1;

      .list-body-inside {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-grow: 1;
        box-sizing: border-box;
        border-bottom: 2px solid rgba(116, 163, 216, 0.6);

        .label-item {
          border-right: 2px solid rgba(116, 163, 216, 0.6);
          color: white;
          flex: 1;
          height: auto;
          line-height: 100%;
          text-align: center;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-flex;
          align-self: auto;
          align-content: center;

          .item-inside {
            width: calc(100% - 24px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            padding: 0 12px;
            box-sizing: content-box;
            align-self: center;
          }

          .col-wait-inside {
            display: flex;
            height: 100%;
            background: transparent;

            .wait-info {
              flex: 1;
              height: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              border-radius: 4px;
              display: inline-flex;
              text-align: center;
              align-items: center;
              justify-content: center;
            }
          }
        }

        .deptName-name {
          color: rgba(148, 247, 252, 1);
        }

        .label-item:last-child {
          border-right: none;
        }
      }

      .list-body-inside:last-child {
        border-bottom: none;
      }
    }
  }
  .widget-inside-bottom {
    display: flex;
    width: 100%;
    height: 130px;
    align-items: center;
    padding: 0 50px;
    box-sizing: border-box;
    overflow: hidden;
    .time {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 350px;
      height: 100px;
      font-size: 66px;
      font-weight: 500;
      color: #333;
      color: #ffffff;
      background: #000000;
      border-radius: 60px;
      padding: 0 20px;
      box-sizing: border-box;
      margin-right: 50px;
    }
    .text {
      width: 100%;
      overflow: hidden;
      font-size: 66px;
      font-weight: 500;
      color: #ffffff;
    }
    .widget-inside-bottom-right{
      flex: 1;
      overflow: hidden;

    }
  }

  //隐藏头部--列表高度的变化
  .header-hide {
    .list-body {
      height: calc(100%);
    }
  }
}
</style>

